<template>
  <div class="directives-view">
    <div class="item-view">
      <div class="label">自动聚焦:</div>
      <input type="text" v-focus v-model="test_1" />
    </div>

    <div class="item-view">
      <div class="label">向右移动 50px:</div>
      <input type="text" v-move:left="50" />
    </div>

    <div class="item-view">
      <div class="label">输入框防抖:</div>
      <input type="text" v-throttle="3000" v-model="test_2" />
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      bind: function (el) {
        console.log(el, " ==== bind");
      },
      // 指令的定义
      inserted: function (el) {
        console.log(el, " ==== inserted");
        el.focus();
      },
    },
    move: {
      bind: function (el, binding) {
        let s = `margin-${binding.arg}`;
        el.style[s] = binding.value + "px";
        console.log(el, binding);
      },
    },
    throttle: {
      bind: function (el, binding, vnode) {
        let throttleTime = binding.value;
        if (!throttleTime) {
          throttleTime = 2000;
        }
        let timer = null;
        el.addEventListener(
          "input",
          () => {
            timer && clearTimeout(timer);
            timer = setTimeout(() => {
              console.log("====== 发起请求", vnode, '===binding');

              timer && clearTimeout(timer);
            }, throttleTime);
          },
          true
        );
      },
    },
  },
  data() {
    return {
      test_1: "",
      test_2: "",
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.directives-view {
  .item-view {
    padding: 10px 20px;
    background: #eee;
    .label {
      font-size: 14px;

      margin: 10px 0;
    }
  }
}
</style>